<template>
  <footer class="app-footer">
    <div class="footer-container">
      <!-- 主要内容区域 -->
      <div class="footer-main">
        <!-- 公司信息 -->
        <div class="footer-section company-info">
          <div class="footer-logo">
            <img src="@/assets/logo.png" alt="Logo" class="logo-image" />
            <span class="logo-text">在线学习平台</span>
          </div>
          <p class="company-desc">
            致力于为用户提供优质的在线学习体验，
            涵盖各类课程和专业考试，助力个人成长与职业发展。
          </p>
          <div class="social-links">
            <a href="#" class="social-link" title="微信">
              <i class="iconfont icon-wechat"></i>
            </a>
            <a href="#" class="social-link" title="微博">
              <i class="iconfont icon-weibo"></i>
            </a>
            <a href="#" class="social-link" title="QQ">
              <i class="iconfont icon-qq"></i>
            </a>
            <a href="#" class="social-link" title="邮箱">
              <i class="iconfont icon-email"></i>
            </a>
          </div>
        </div>

        <!-- 快速链接 -->
        <div class="footer-section quick-links">
          <h3 class="section-title">快速链接</h3>
          <ul class="link-list">
            <li><router-link to="/courses">课程中心</router-link></li>
            <li><router-link to="/exams">考试中心</router-link></li>
            <li><router-link to="/about">关于我们</router-link></li>
            <li><router-link to="/help">帮助中心</router-link></li>
            <li><router-link to="/contact">联系我们</router-link></li>
            <li><router-link to="/careers">加入我们</router-link></li>
          </ul>
        </div>

        <!-- 学习资源 -->
        <div class="footer-section learning-resources">
          <h3 class="section-title">学习资源</h3>
          <ul class="link-list">
            <li><router-link to="/courses?category=frontend">前端开发</router-link></li>
            <li><router-link to="/courses?category=backend">后端开发</router-link></li>
            <li><router-link to="/courses?category=mobile">移动开发</router-link></li>
            <li><router-link to="/courses?category=ai">人工智能</router-link></li>
            <li><router-link to="/courses?category=design">UI/UX设计</router-link></li>
            <li><router-link to="/courses?category=data">数据科学</router-link></li>
          </ul>
        </div>

        <!-- 用户服务 -->
        <div class="footer-section user-service">
          <h3 class="section-title">用户服务</h3>
          <ul class="link-list">
            <li><router-link to="/profile">个人中心</router-link></li>
            <li><router-link to="/my-courses">我的课程</router-link></li>
            <li><router-link to="/my-exams">我的考试</router-link></li>
            <li><router-link to="/certificates">我的证书</router-link></li>
            <li><router-link to="/learning-records">学习记录</router-link></li>
            <li><router-link to="/settings">账户设置</router-link></li>
          </ul>
        </div>

        <!-- 联系信息 -->
        <div class="footer-section contact-info">
          <h3 class="section-title">联系我们</h3>
          <div class="contact-item">
            <i class="iconfont icon-phone"></i>
            <span>客服热线：400-123-4567</span>
          </div>
          <div class="contact-item">
            <i class="iconfont icon-email"></i>
            <span>邮箱：support@example.com</span>
          </div>
          <div class="contact-item">
            <i class="iconfont icon-location"></i>
            <span>地址：北京市朝阳区xxx大厦</span>
          </div>
          <div class="contact-item">
            <i class="iconfont icon-time"></i>
            <span>服务时间：9:00-18:00</span>
          </div>
        </div>
      </div>

      <!-- 分割线 -->
      <div class="footer-divider"></div>

      <!-- 底部信息 -->
      <div class="footer-bottom">
        <div class="footer-bottom-left">
          <span class="copyright">
            © {{ currentYear }} 在线学习平台. All rights reserved.
          </span>
          <div class="legal-links">
            <router-link to="/privacy">隐私政策</router-link>
            <span class="separator">|</span>
            <router-link to="/terms">服务条款</router-link>
            <span class="separator">|</span>
            <router-link to="/disclaimer">免责声明</router-link>
          </div>
        </div>
        
        <div class="footer-bottom-right">
          <div class="certifications">
            <span class="cert-item">ICP备案号：京ICP备12345678号</span>
            <span class="cert-item">公安备案号：11010502012345</span>
          </div>
          
          <!-- 回到顶部按钮 -->
          <el-button 
            v-show="showBackToTop"
            class="back-to-top"
            circle
            @click="scrollToTop"
            :icon="ArrowUp"
          />
        </div>
      </div>
    </div>

    <!-- 移动端简化版 -->
    <div class="footer-mobile" v-if="isMobile">
      <div class="mobile-footer-content">
        <div class="mobile-logo">
          <img src="@/assets/logo.png" alt="Logo" class="logo-image" />
          <span class="logo-text">在线学习平台</span>
        </div>
        
        <div class="mobile-links">
          <router-link to="/about">关于我们</router-link>
          <router-link to="/help">帮助中心</router-link>
          <router-link to="/contact">联系我们</router-link>
          <router-link to="/privacy">隐私政策</router-link>
        </div>
        
        <div class="mobile-contact">
          <div class="contact-item">
            <i class="iconfont icon-phone"></i>
            <span>400-123-4567</span>
          </div>
          <div class="contact-item">
            <i class="iconfont icon-email"></i>
            <span>support@example.com</span>
          </div>
        </div>
        
        <div class="mobile-copyright">
          © {{ currentYear }} 在线学习平台. All rights reserved.
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ArrowUp } from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

// 响应式数据
const showBackToTop = ref(false)

// 计算属性
const currentYear = computed(() => new Date().getFullYear())
const isMobile = computed(() => appStore.isMobile)

// 方法
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

const handleScroll = () => {
  showBackToTop.value = window.scrollY > 300
}

// 生命周期
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style lang="scss" scoped>
.app-footer {
  background: var(--el-bg-color-page);
  border-top: 1px solid var(--el-border-color-light);
  margin-top: auto;
  
  .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 20px;
  }
  
  .footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 30px;
    
    @media (max-width: 768px) {
      display: none;
    }
  }
  
  .footer-section {
    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
      margin-bottom: 16px;
    }
    
    .link-list {
      list-style: none;
      padding: 0;
      margin: 0;
      
      li {
        margin-bottom: 8px;
        
        a {
          color: var(--el-text-color-regular);
          text-decoration: none;
          font-size: 14px;
          transition: color 0.3s ease;
          
          &:hover {
            color: var(--el-color-primary);
          }
        }
      }
    }
  }
  
  .company-info {
    .footer-logo {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      
      .logo-image {
        height: 32px;
        margin-right: 8px;
      }
      
      .logo-text {
        font-size: 18px;
        font-weight: 600;
        color: var(--el-text-color-primary);
      }
    }
    
    .company-desc {
      color: var(--el-text-color-regular);
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 20px;
    }
    
    .social-links {
      display: flex;
      gap: 12px;
      
      .social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--el-fill-color-light);
        color: var(--el-text-color-regular);
        text-decoration: none;
        transition: all 0.3s ease;
        
        &:hover {
          background: var(--el-color-primary);
          color: white;
          transform: translateY(-2px);
        }
        
        i {
          font-size: 16px;
        }
      }
    }
  }
  
  .contact-info {
    .contact-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      color: var(--el-text-color-regular);
      font-size: 14px;
      
      i {
        margin-right: 8px;
        color: var(--el-color-primary);
        font-size: 16px;
      }
    }
  }
  
  .footer-divider {
    height: 1px;
    background: var(--el-border-color-light);
    margin: 30px 0 20px;
    
    @media (max-width: 768px) {
      display: none;
    }
  }
  
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    
    @media (max-width: 768px) {
      display: none;
    }
    
    .footer-bottom-left {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      
      .copyright {
        color: var(--el-text-color-placeholder);
        font-size: 14px;
      }
      
      .legal-links {
        display: flex;
        align-items: center;
        gap: 8px;
        
        a {
          color: var(--el-text-color-regular);
          text-decoration: none;
          font-size: 14px;
          
          &:hover {
            color: var(--el-color-primary);
          }
        }
        
        .separator {
          color: var(--el-text-color-placeholder);
        }
      }
    }
    
    .footer-bottom-right {
      display: flex;
      align-items: center;
      gap: 20px;
      
      .certifications {
        display: flex;
        gap: 16px;
        
        .cert-item {
          color: var(--el-text-color-placeholder);
          font-size: 12px;
        }
      }
      
      .back-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 999;
        width: 40px;
        height: 40px;
        background: var(--el-color-primary);
        border: none;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        
        &:hover {
          background: var(--el-color-primary-light-3);
          transform: translateY(-2px);
        }
      }
    }
  }
  
  // 移动端样式
  .footer-mobile {
    display: none;
    padding: 20px;
    
    @media (max-width: 768px) {
      display: block;
    }
    
    .mobile-footer-content {
      text-align: center;
      
      .mobile-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        
        .logo-image {
          height: 28px;
          margin-right: 8px;
        }
        
        .logo-text {
          font-size: 16px;
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
      }
      
      .mobile-links {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 20px;
        
        a {
          color: var(--el-text-color-regular);
          text-decoration: none;
          font-size: 14px;
          
          &:hover {
            color: var(--el-color-primary);
          }
        }
      }
      
      .mobile-contact {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 20px;
        
        .contact-item {
          display: flex;
          align-items: center;
          color: var(--el-text-color-regular);
          font-size: 14px;
          
          i {
            margin-right: 4px;
            color: var(--el-color-primary);
          }
        }
      }
      
      .mobile-copyright {
        color: var(--el-text-color-placeholder);
        font-size: 12px;
        padding-top: 16px;
        border-top: 1px solid var(--el-border-color-light);
      }
    }
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .app-footer {
    background: var(--el-bg-color-page);
    border-top-color: var(--el-border-color);
  }
}
</style>